<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(p,index) in products">
					<td>{{index+1}}</td>
					<td>{{p.id}}</td>
					<td>{{p.name}}</td>
					<td>{{p.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			data: {
				products: [{
					id: 'itcast001',
					name: "电视机",
					price: 1000
				}, {
					id: "itcast002",
					name: "洗衣机",
					price: 2000
				},
				{
					id: "itcast003",
					name: "笔记本",
					price: 8888
				}] //model
			}
		});
	</script>

</html>